import router from '@/router'
import store from '@/store'

router.beforeEach(async(to, from, next) => {
  if (store.state.user.token) {
    // 已登录
    if (to.path === '/login') {
      // 还是去登录页, 就强制跳到首页
      // next 不带任何参数是直接放行
      // 如果带上一个路径, 则是跳转到相应的页面
      // 跟 router.push 用法差不多
      next('/')
    } else {
      // 其他情况 放行
      // 这里是确定了用户已经登录, 进入的是一个非 登录页外的其他正常页面
      // 需要在这, 进入页面之前获取数据, 这样能够保证无论进入的是哪个页面
      // vuex 当中都能获取到用户数据, 另外如果本来就已经获取过
      // 只是从一个页面进入到另一个, 没必要再次获取,
      if (!store.state.user.profile) {
        await store.dispatch('user/getProfile')
        // 这里是获取完数据的位置
        // 这里就可以进行路由筛选和追加
        // 1. 拿到所有的动态路由数组
        // 2. 拿到这个用户的 menus 数组
        // 进行对照, 路由name存在于 menus 当中就可以访问, 否则不行
        // const menus = store.state.user.profile.roles.menus
        // const routes = asyncRoutes.filter(item => menus.includes(item.name))
        // 所有的 actions 都是promise 可以根据内部的return接收数据

        const routes = await store.dispatch('permission/filterRoutes')
        // 使用一个路由实例的方法 addRoutes 可以追加路由配置, 回复 url 的直接访问(跟菜单无关)
        console.log(routes)
        router.addRoutes([
          ...routes,
          { path: '*', redirect: '/404', hidden: true }

        ])
        // 这里刚刚追加完路由, 但是匹配过程是不会自动重新触发, 原来看不见的页面还是看不见
        // 需要手动, 相同的地址, 跳转一次, 重新触发匹配流程
        next(to.path)
      }
      next()
    }
  } else {
    // 未登录
    // 白名单进行区分
    const whiteList = ['/login', '404']
    if (whiteList.includes(to.path)) {
      // 存在于白名单中放行
      next()
    } else {
      next('/login')
    }
  }
})
